<template>
  <div class="container">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <h2>欢迎登录</h2>
          <el-form-item label="用户名" prop="name">
            <el-input placeholder="请输入用户名" v-model="form.name" clearable>
            </el-input>
          </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-row>
          <el-col :span="20" >
            <el-input  placeholder="请输入密码" v-model="form.password" show-password @input="onchange()"></el-input>
          </el-col>
          <el-col :span="4">
            <el-progress :text-inside="true" :stroke-width="30" style="margin-top: 5px" :percentage="percentage"
                         :color="colors"></el-progress>
          </el-col>
        </el-row>
      </el-form-item>


      <el-form-item label="验证码" prop="code">
       <el-row>
         <el-col :span="10" >
           <el-input placeholder="请输入验证码" v-model="form.code" clearable></el-input>
         </el-col>
         <el-col :span="14" style="margin-top: -4px;">
           <img :src="captcha" alt="验证码" @click="changeCaptcha" style="height: 40px">
         </el-col>
       </el-row>
      </el-form-item>

      <el-row>
        <el-button type="primary" style="width: 100%;margin-bottom: 5%" @click="login('form')">登录</el-button>
      </el-row>

    </el-form>
  </div>
</template>

<script>
import Qs from 'qs'

export default {
  name: 'Login',
  data() {
    return {
      form:{
        name: "",
        password: "",
        code: "",
      },
      rules:{
        name:[
          {
            required:true,
            message: "请输入用户名",
            trigger:'blur'
          },
          {
            min:1,
            max:10,
            message:"长度在 1 到 10 个字符",
            trigger: 'blur'
          }
        ],
        password:[
          {
            required:true,
            message: "请输入密码",
            trigger:'blur'
          },
          {
            min:1,
            max:10,
            message:"长度在 1 到 20 个字符",
            trigger: 'blur'
          }
        ],
        code:[
          {
            required:true,
            message: "请输入验证码",
            trigger:'blur'
          }
        ]
      },
      //请求验证码
      captcha: "http://localhost:9090/captcha",
      //进度条默认百分比
      percentage: 0,
      //进度条颜色
      colors: [
        {color: '#f56c6c', percentage: 30},
        {color: '#e6a23c', percentage: 60},
        {color: '#5cb87a', percentage: 80}
      ]
    }
  },
  methods: {
    //刷新验证码
    changeCaptcha: function () {
      this.captcha = "http://localhost:9090/captcha?v=" + Date.now();
    },
    login: function (formName) {
      this.$refs[formName].validate((valid) => {
        let vm = this;
        //判断表单校验结果
        if (valid) {
          //成功发送axios请求
          this.axios({
            method: "post",
            url: "/localhost/loginJson",
            data: {
              name: vm.form.name,
              password: vm.form.password,
              code: vm.form.code
            },
            transformRequest: [function (data) {
              return Qs.stringify(data);
            }],
          }).then(function (res) {
            if (res.data.code == 0) {
              vm.$message({
                message: res.data.msg,
                type: "success"
              });
              vm.$store.commit('updateUser', res.data.data);
              setTimeout(function () {
                vm.$router.push("/Home");
              }, 500);
            } else {
              vm.$message({
                message: res.data.msg,
                type: "error"
              });
            }
          })
        } else {
          this.$message.error("输入格式有误");
          return false;
        }
      })
    },
    format(percentage) {
      return percentage === 100 ? '满' : `${percentage}%`;
    },
    //密码进度条监听
    onchange: function () {
      let length = this.form.password.length;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
      if (this.percentage < 0) {
        this.percentage = 0;
      }
      if (length < 5) {
        this.percentage = 10
      }
      if (length > 6 && length < 10) {
        this.percentage = 50;
      }
      if (length > 12) {
        this.percentage = 100
      }
    }
  },
  computed: {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container{
  width: 30%;
  border: 1px solid aliceblue;
  margin-top: 10%;
  border-radius: 5%;
  background-color: aliceblue;
}
</style>
